<script setup>

</script>

<template>
  <div class="main">
    <section class="notice">
      <p class="notice-item mx-auto w-eq-content">
        <span>量身定制, 提升品牌形象和可信度; 专业建站顾问, 本地化上门服务, 服务客户7万+</span>
        <a class="pl-24">查看更多</a>
      </p>
    </section>
    <section class="services">
      <h1 class="services-title text-center py-24 animate__animated animate__zoomInDown">
        <!--服务标题-->
        Vue Manager产品和服务
      </h1>
      <div class="services-content">
        <p class="services-content-item animate__animated animate__slideInLeft" style="animation-delay: 200ms"></p>
        <p class="services-content-item animate__animated animate__slideInLeft" style="animation-delay: 100ms"></p>
        <p class="services-content-item animate__animated animate__zoomInUp" style="animation-delay: 200ms"></p>
        <p class="services-content-item animate__animated animate__slideInRight" style="animation-delay: 300ms"></p>
        <p class="services-content-item animate__animated animate__slideInRight" style="animation-delay: 400ms"></p>
      </div>
    </section>
    <section class="case">
      <h1 class="case-title text-center py-24">
        <!--使用案例-->
        使用案例
      </h1>
      <div class="case-content">
        <p class="case-content-item"></p>
        <p class="case-content-item"></p>
        <p class="case-content-item"></p>
        <p class="case-content-item"></p>
        <p class="case-content-item"></p>
      </div>
    </section>
  </div>
</template>

<style scoped lang="less">
.main {
  width: 100%;
  min-height: 800px;
  background-color: var(--content-backdrop-color);
}

.notice {
  width: 100%;
  height: 50px;
  background-color: var(--tab-color);

  &-item {
    height: 55px;
    line-height: 55px;
  }
}

.services {
  padding: 24px 120px;

  &-title {
    color: var(--text-color-2);
    font-size: 30px;
  }

  &-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
    overflow: hidden;

    &-item {
      flex: 1 0 auto;
      height: 240px;
      margin: 0 12px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
    }
  }
}

.case {
  padding: 24px 120px;

  &-title {
    color: var(--text-color-2);
    font-size: 30px;
  }

  &-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;

    &-item {
      flex: 1 0 auto;
      height: 240px;
      margin: 0 12px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
    }
  }
}
</style>